<template>
  <div>
    <!--按钮-->
    <el-button
      type="primary"
      :disabled="btnDisabled"
      @click="buttonClick()"
    >
      {{buttonMeta.btnTitle}}({{buttonMeta.hotkey}})
    </el-button>
    <!--弹窗，表单-->
    <div v-dialogdrag="buttonMeta.dialogWidth">
      <el-dialog
        :title="buttonMeta.dialogTitle"
        v-model="_dialogInfo.isShow"
        :modal="true"
        :width="buttonMeta.dialogWidth"
      >
        <component
          :is="componentKind[buttonMeta.controlKey]"
          :moduleId="buttonMeta.openModuleId"
          :dataId="dataListState.choice.dataId"
          :formMetaId="buttonMeta.formMetaId"
          :actionId="buttonMeta.actionId"
          :type="buttonMeta.btnKind"
          :dialogInfo="dialogInfo"
        >
        </component>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

// 新的列表页面的管理类
import { getList } from '../../controller/data-list-controller.js'

import { ElMessageBox, ElMessage } from 'element-plus'
</script>

<script setup>
// 组件字典
import componentKind from '../project/component.js'

// 属性：模块ID
const props = defineProps({
  moduleId: [Number, String],
  buttonMeta: Object,
  dialogInfo: Object
})

const _dialogInfo = props.dialogInfo

// 子组件里面获取状态
const dataListState = getList()

// 设置按钮是否可用
const btnDisabled = ref(true)

// 单击按钮，显示弹窗
const buttonClick = () => {
  // 按钮信息
  if (props.buttonMeta.btnKind === 'add') {
    _dialogInfo.isShow = true // 是否显示弹窗
  } else if (!btnDisabled.value) {
    _dialogInfo.isShow = true
  } else {
    const msgError = {
      type: 'info',
      message: '请先选择一条记录。'
    }
    ElMessage(msgError)
  }
}

// 把自己的click事件，传递给父组件
const meta = props.buttonMeta
meta.events.buttonClick = buttonClick

// 监听选择的变化，记入状态
watch(() => dataListState.choice.dataId, (id) => {
  btnDisabled.value = id === ''
  if (props.buttonMeta.btnKind === 'add') {
    btnDisabled.value = false
  }
},
{ immediate: true })

</script>
